{% block sw_wizard %}
<sw-modal
    class="sw-wizard"
    v-bind="$attrs"
    :title="title"
    @modal-close="onClose"
    @page-add="addPage"
    @page-remove="removePage"
>
    <slot>
        {% block sw_wizard_slot_default %}{% endblock %}
    </slot>

    {% block sw_wizard_slot_footer %}
    <template #modal-footer>
        <slot name="footer-left-button">
            {% block sw_wizard_slot_footer_left_buttons %}
            {% block sw_wizard_slot_footer_left_buttons_close %}
            <mt-button
                v-if="currentlyActivePage === 0"
                size="small"
                :disabled="leftButtonDisabled"
                variant="secondary"
                @click="onClose"
            >
                {{ $tc('sw-wizard.closeButton') }}
            </mt-button>
            {% endblock %}

            {% block sw_wizard_slot_footer_left_buttons_back %}
            <mt-button
                v-else
                size="small"
                :disabled="leftButtonDisabled"
                variant="secondary"
                @click="previousPage"
            >
                {{ $tc('sw-wizard.backButton') }}
            </mt-button>
            {% endblock %}

            {% endblock %}

        </slot>

        <slot name="footer-dot-navigation">
            {% block sw_wizard_slot_footer_dot_navigation %}
            <sw-wizard-dot-navigation
                v-if="showNavigationDots"
                :pages="pages"
                :active-page="currentlyActivePage"
            />
            {% endblock %}

        </slot>

        <slot name="footer-right-button">
            {% block sw_wizard_slot_footer_right_button %}
            {% block sw_wizard_slot_footer_right_button_finish %}
            <mt-button
                v-if="currentlyActivePage >= pagesCount - 1"
                size="small"
                variant="primary"
                :disabled="rightButtonDisabled"
                @click="$emit('finish')"
            >
                {{ $tc('sw-wizard.finishButton') }}
            </mt-button>
            {% endblock %}

            {% block sw_wizard_slot_footer_right_button_next %}
            <mt-button
                v-else
                size="small"
                variant="primary"
                :disabled="rightButtonDisabled"
                @click="nextPage"
            >
                {{ $tc('sw-wizard.nextButton') }}
            </mt-button>
            {% endblock %}
            {% endblock %}

        </slot>
    </template>
    {% endblock %}

</sw-modal>
{% endblock %}
